<template>
	<view>
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in levelList" :key="index" @click="selectItemFun(index)">
				<view class="m-item-radio">
					<image v-if="current == index" src="../static/hotel/radio-select.png" mode=""></image>
					<image v-else src="../static/hotel/radio.png" mode=""></image>
				</view>
				<view class="m-info">
					<view class="m-info-image">
						<image :src="item.logo" mode=""></image>
					</view>
					<view class="m-info-content">
						<view class="m-info-name">
							<text>{{item.title}}</text>
						</view>
						<view class="m-info-text">
							<text>{{item.yhq_remark}}</text>
						</view>
					</view>
				</view>
				<view class="m-item-right">
					<text class="m-item-price">{{item.price}}</text>
				</view>
			</view>

		</view>
		
		<view class="m-bottom">
			<view class="m-bottom-left">
				<text>订单金额</text>
				<text class="m-bottom-price">{{currentPrice}}</text>
			</view>
			<view class="m-bottom-right">
				<view class="m-bottom-btn" @click="submitFun">
					<text>去支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {get_userInfo} from "@/common/function/api_fun.js"
	export default {
		data() {
			return {
				levelList:[],
				current:0,
			}
		},
		computed:{
			currentPrice(){
				let price = 0
				if( this.levelList.length  > 0){
					return this.levelList[this.current].price
				}else{
					return 0
				}
			}
		},
		onLoad() {
			this.getIndexFun()
		},
		methods: {
			submitFun(){
				if(this.levelList.length ==0){
					this.$m.msg('请选择会员等级')
					return false
				}
				let item = this.levelList[this.current]
				this.$http.getJson('money_buyVip',{id:item.id}).then(res=>{
					if(res.code == 1){
						this.$http.wx_pay(res.data).then(e => {
							if (e.errMsg == 'requestPayment:fail cancel' || e.errMsg ==
								'requestPayment:fail') {
								this.$m.msg('支付失败')
							} else {
								this.$m.msg('升级成功',()=>{
									this.to_back()
								})
							}
						})
						
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			selectItemFun(index){
				this.current = index
			},
			getIndexFun(){
				this.$http.getJson('index_index').then(res=>{
					if(res.code == 1){
						let levelBack = []
						res.data.adverts.forEach(item=>{
							if(item.title == '会员等级logo'){
								levelBack = item.images
							}
						})
						get_userInfo((data)=>{
							this.user_info = data
							let levelList = []
							data.level_rules.forEach(item=>{
								if(item.id > data.level_id){
									let val = levelBack.find(val=>val.title == item.title)
									levelList.push({
										...item,
										logo:val ? val.image : ''
									})
								}
							})
							this.levelList = levelList
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.m-list{
	padding: 0 25rpx;
	.m-item{
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #E6E3DE;
		.m-item-radio{
			display: flex;
			align-items: center;
			width: 90rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		.m-info{
			display: flex;
			align-items: center;
			.m-info-image{
				width: 140rpx;
				height: 140rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.m-info-content{
				padding-left: 24rpx;
				.m-info-name{
					font-size: 30rpx;
					color: #462E1A;
					font-weight: 800;
				}
				.m-info-text{
					font-size: 24rpx;
					color: #9A958F;
					margin-top: 12rpx;
				}
			}
		}
		.m-item-right{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			.m-item-price{
				font-size: 40rpx;
				color: #DE2C38;
				font-weight: 600;
				&::before{
					content: '￥';
					font-size: 24rpx;
				}
			}
		}
	}
}

.m-bottom{
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 750rpx;
	height: 120rpx;
	bottom: 0;
	background: #fff;
	box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0,0,0,0.06);
	box-sizing: content-box;
	.m-bottom-left{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #33302D;
		margin-left: 25rpx;
		.m-bottom-price{
			font-size: 40rpx;
			color: #DE2C38;
			&::before{
				content:'￥';
				font-size: 24rpx;
			}
		}
	}
	.m-bottom-right{
		padding-right: 25rpx;
		.m-bottom-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #fff;
			width: 240rpx;
			height: 88rpx;
			background: #D3A358;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
}
</style>
